@import '../../../config/config.less';

@css-prefix-table: ~"@{css-prefix}table";

// %shared-border-pseudo===share-rule(border-pseudo)
// 共享规则的意思
.shared-border-pseudo() {
  content: '';
  position: absolute;
  background-color: @table-default-border-color;
  z-index: 1;
}

.is-scrolling-none {
  ~ .aty-table__fixed,
  ~ .aty-table__fixed-right {
    box-shadow: none;
  }
}

.is-scrolling-left {
  ~ .aty-table__fixed {
    box-shadow: none;
  }
}

.is-scrolling-right {
  // E~F { sRules }
  // 选择E元素后面的所有兄弟元素F。
  ~ .aty-table__fixed-right {
    box-shadow: none;
  }
}


.is-scrolling-right {
  ~ .aty-table__fixed-right {
    border-left: 1px solid  @table-default-border-color;
  }
}

.is-scrolling-left {
  ~ .aty-table__fixed {
    border-right: 1px solid  @table-default-border-color;
  }
}

.@{css-prefix-table} {
    &--border {
      border: 1px solid  @table-default-border-color;
    }
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    max-width: 100%;
    background-color:#fff;
    font-size: 14px;
    color:  @text-color;
    // 数据为空
    &__empty-block{
      position: relative;
      min-height: 60px;
      text-align: center;
      width: 100%;
      height: 100%;
    }
   // 数据为空文本
    &__empty-text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color:@btn-disable-color
    }
    &__expanded-row_left_right {
      height: 86px;
      background: transparent;
      pointer-events: none;
    }
    &__expand-column{
      &.cell {
        padding: 0;
        text-align: center;
      }
      >.aty-icon{
        width: 100%;
        line-height: 23px;
        cursor: pointer;
        &.expand-icon-expanded{
          transform: rotate(90deg);
        }
      }
    }
    &__expand-icon{
      position: relative;
      cursor: pointer;
      color: #666;
      font-size: 12px;
      transition: transform 0.2s ease-in-out;
      height: 20px;
      > .@{css-prefix}icon {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -5px;
        margin-top: -5px;
      }
      //展开旋转90deg
      &--expanded{
        transform: rotate(90deg);
      }
    }
    &__expanded-cell{
      background-color:@table-default-bg;
      &[class*=cell] {
        padding: 20px 50px;
      }
      // 纯属为了增加权重
      &:hover {
        background-color: transparent !important;
      }
    }
    &--scrollable-x{
      .aty-table__body-wrapper {
        overflow-x: auto;
      }
    }
    &--scrollable-y{
      .aty-table__body-wrapper {
        overflow-y: auto;
      }
    }

    thead {
      color: @table-title-color;
      font-weight: 500;

      &.is-group {
        th {
          background: @table-thead-bg;
        }
      }
    }

    th, td {
      padding: 8px 0;
      min-width: 0;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      position: relative;

      &.is-center{
        text-align: center;
      }
      &.is-left{
        text-align: left;
      }
      &.is-right{
        text-align: right;
      }


      &.gutter {
        width: 15px;
        border-right-width: 0;
        border-bottom-width: 0;
        padding: 0;
      }

      &.is-hidden {
        > * {
          visibility: hidden;
        }
      }
    }

    th {
        vertical-align: bottom;
    }

    tr {
      background-color:@table-default-bg;

      input[type="checkbox"] {
        margin: 0;
      }
    }

    th.is-leaf, td {
      border-bottom: 1px solid @table-default-border-color;
    }
    // 是否可以排序
    th.is-sortable {
      cursor: pointer;
    }

   th.is-sortable .filter-wrap {
        cursor: default;
    }     th {
      white-space: nowrap;
      overflow: hidden;
      user-select: none;
      text-align: left;
      background-color: @table-default-bg;
      >div {
        display: block;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 40px;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.filter-wrap {
            white-space: normal;
        }
      }

      > .cell ,
      >.filter-wrap{

        position: relative;
        word-wrap: normal;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap;

        &.highlight {
          color: @primary-color;
        }

      }
      > .cell{
        background-color: @table-default-head-bg;
    }
      >.filter-wrap {
        display: block;
      }

      &.required > div::before {
        display: inline-block;
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff4d51;
        margin-right: 5px;
        vertical-align: middle;
      }
    }

    td {
        div {
          box-sizing: border-box;
        }

        &.gutter {
          width: 0;
        }
    }

    .cell {
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
        //display: block;
      line-height: @table-line-height;
      padding-left: 8px;
      padding-right: 8px;
      height: @table-head-height;
        .title-wrapper {
            max-width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;

        }
      &.tooltip {
        white-space: nowrap;
        min-width: 50px;
      }

      &.cell-wrap {
        white-space: normal;
      }
    }
    // 拥有多级表头
    &.is-group,
    &.is-border {
      border: 1px solid @table-default-border-color;
        // 表格右部伪 border
        &::after {
          .shared-border-pseudo();
          top: 0;
          right: 0;
          width: 1px;
          height: 100%;
        }
    }

    // 表格底部伪 border，总是有的
    &::before {
      .shared-border-pseudo();
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
    }
  // table--border
  &--border{

      &.aty-loading-parent--relative {
        border-color: transparent;
      }

      th, td {
        border-right: 1px solid @table-default-border-color;

        &:first-child .cell {
          padding-left: 10px;
        }
      }

      th.gutter:last-of-type {
        border-bottom: 1px solid @table-default-border-color;
      }

      & th {
        border-bottom:  1px solid @table-default-border-color;
      }
    }

    &--hidden {
      visibility: hidden;
    }
    &__fixed,
    &__fixed-right {
      position: absolute;
      top: 0;
      left: 0;
      overflow-x: hidden;
      overflow-y: hidden;
      box-shadow: @shadow-base;
      pointer-events: none;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: @border-color-lighter;
        z-index: 4;
      }
      &-body-wrapper,
      &-body-wrapper table,
      &-body-wrapper table tbody {
        pointer-events: none;
        tr {
          pointer-events: auto;
        }
      }
      &-header-wrapper table thead tr{
        pointer-events: auto;
      }
    }
    &__fixed {
      .@{css-prefix-table}__row {
        td:last-child {
          border-right: 1px solid @table-default-border-color;
        }
      }
    }
    &__fixed-right {
      .@{css-prefix-table}__row {
        td:first-child {
          border-left: 1px solid @table-default-border-color;
          //box-shadow: @shadow-base;
        }
      }
    }

    &__fixed-right-patch {
      position: absolute;
      top: -1px;
      right: 0;
      background-color: #fff;
      border-bottom: 1px solid  @table-default-border-color;
    }

    &__fixed-right {
        top: 0;
        left: auto;
        right: 0;
        .aty-table__fixed-header-wrapper,
        .aty-table__fixed-body-wrapper,
        .aty-table__fixed-footer-wrapper {
          left: auto;
          right: 0;
        }
    }

    &__fixed-header-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
    }

    &__fixed-footer-wrapper {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 3;

      & tbody td {
        border-top: 1px solid  @table-default-border-color;
        background-color: @table-td-hover-bg;
        color: @text-color;
      }
    }

    &__fixed-body-wrapper {
      position: absolute;
      left: 0;
      top: 37px;
      overflow: hidden;
      z-index: 3;
    }

    &__header-wrapper,
    &__body-wrapper,
    &__footer-wrapper{
      width: 100%;
    }

    &__footer-wrapper {
      margin-top: -1px;
      td {
        border-top:  1px solid  @table-default-border-color;
      }
    }

    &__header,
    &__body,
    &__footer {
      table-layout: fixed;
      border-collapse: separate;
    }

    &__header-wrapper,
    &__footer-wrapper {
      overflow: hidden;

      & tbody td {
        background-color: @table-td-hover-bg;
        color: @text-color;
      }
    }


     &__body-wrapper {
      overflow: hidden;
      position: relative;

    }

    .caret-wrapper {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      height: 22px;
      width: 24px;
      vertical-align: middle;
      cursor: pointer;
      overflow: initial;
      position: relative;
        top: -1px;
        margin-right: -5px;
      /*top: @table-wrapper-top;*/
      /*right: 0;*/
    }

    .sort-caret {
      width: 0;
      height: 0;
      border: solid 5px transparent;
      position: absolute;
      left: 7px;

      &.ascending {
        border-bottom-color: @input-placeholder-color;
        top: 0px;
      }

      &.descending {
        border-top-color: @input-placeholder-color;
        bottom: 0px;
      }
    }

    .ascending .sort-caret.ascending {
      border-bottom-color: @primary-color;
    }

    .descending .sort-caret.descending {
      border-top-color: @primary-color;
    }

    .hidden-columns {
      visibility: hidden;
      position: absolute;
      z-index: -1;
    }

     &--striped {
      & .aty-table__body {
        & tr.aty-table__row--striped {
          td {
            background: @table-td-stripe-bg;
          }

          &.current-row td {
            background-color: @table-td-highlight-bg;
          }
        }
      }
    }

     &__body {
        tr.hover-row {
          &, &.aty-table__row--striped {
            &, &.current-row {
              > td {
                background-color: @table-td-highlight-bg
              }
            }
          }
        }

        tr.current-row > td {
          background-color: @table-td-highlight-bg
        }
     }


     &__column-resize-proxy {
      position: absolute;
      left: 200px;
      top: 0;
      bottom: 0;
      width: 0;
      border-left:1px solid  @table-default-border-color;
      z-index: 10;
    }

    &__column-filter-trigger {
      display: inline-block;
      /*line-height: 34px;*/
      cursor: pointer;
      & i {
        color: @title-color;
        font-size: 14px;
        margin-left: 4px;
        transform: scale(.75);
      }
    }

    &--enable-row-transition {
        .aty-table__body td {
          transition: background-color .25s ease;
        }
    }

    &--enable-row-hover {
      .aty-table__body tr:hover > td {
        background-color: @table-td-hover-bg;
      }
    }

    th .filter-tip {
        .aty-dropdown{
            position: relative;
            &::before {
                content:'';
                position: absolute;
                top: 8px;
                right: 10px;
                z-index: 1;
                width: 4px;
                height: 4px;
                border-radius: 2px;
                border: none;
                background-color: red;
            }

        }

    }

    +.aty-pagination {
      margin-top: 20px;
    }

}

